<template>
  <div class="third-comp">
    <div class="left">
      <el-card shadow="hover">
        <template #header>
          <h2>关键词搜索</h2>
        </template>
        <template #default>
        <div class="main">
          <div class="charts">
            <div class="left-chart">
                <div class="title">搜索用户量</div>
                <div class="number">{{ userNum }}</div>
                <v-chart :option="userOption"></v-chart>
            </div>
            <div class="right-chart">
                <div class="title">搜索量</div>
                <div class="number">{{ searchNum }}</div>
                <v-chart :option="searchOption"></v-chart>
            </div>
          </div>
          <div class="table">
              <el-table :data="pageData">
                <el-table-column label="排名" prop="rank"></el-table-column>
                <el-table-column label="关键词" prop="keyWord"></el-table-column>
                <el-table-column label="总搜索量" prop="totalSearch"></el-table-column>
                <el-table-column label="搜索用户数" prop="totalUser"></el-table-column>
              </el-table>
            <el-pagination
              background
              layout="prev,pager,next"
              :page-size="6"
             :total="tableData.length"
              @current-change="handleCurrentChange"
            ></el-pagination>
          </div>
        </div>
        </template>
      </el-card>
    </div>
    <div class="right">
            <el-card shadow="hover">
        <template #header>
          <h2>热门搜索</h2>
          <el-radio-group v-model="type" @change="handleChange">
            <el-radio-button label="品类" value="category"></el-radio-button>
            <el-radio-button label="商品" value="product"></el-radio-button>
          </el-radio-group>
        </template>
        <template #default>
          <v-chart :option="categoryOption"></v-chart>
        </template>
      </el-card>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted,computed } from 'vue'
import { getKeywordsData, getCategoryData } from '@/api/index.js'
const tableData = ref([])
const page = ref(1)
const userOption = ref({}) // 用户量图表配置
const searchOption = ref({}) // 搜索量图表配置
const type = ref('category') // 热门搜索类型
const categoryData = ref([])
const categoryOption = ref({}) // 分类搜索图表配置
const pageData = computed(()=>{
    const start = (page.value - 1) * 6
    const end = start + 6
    return tableData.value.slice(start, end)
})
// 总用户量
const userNum = computed(() => {
  return tableData.value.reduce((acc, cur) => acc + cur.totalUser, 0)
})
// 总搜索量
const searchNum = computed(() => {
  return tableData.value.reduce((acc, cur) => acc + cur.totalSearch, 0)
})
const handleCurrentChange = (value) => {
  page.value = value
}
const renderLineChart = (chartOption, data) => {
  chartOption.value = {
    xAxis: {
      type: 'category',
      show: false,
      boundaryGap: false,
    },
    yAxis: {
      show: false,
    },
    grid: {
      top: 0,
      left: 0,
      right: 0,
      bottom: 0,
    },
    series: {
      type: 'line',
      data: data,
      areaStyle: {
        color: 'skyblue',
      },
      itemStyle: {
        opacity: 0,
      },
      smooth: true,
    },
  }
}
const renderCategoryChart = (data) => {
  const _data = data.map((item) => {
    return {
      ...item,
      // 添加一个name属性
      name: `${item.title} | ${item.value}`,
    }
  })
  const total = data.reduce((acc, cur) => acc + cur.value, 0)
  categoryOption.value = {
    title: [
      {
        text: '品类分布',
        left:'left',
        textStyle: {
          fontSize: 14,
          color: '#666',
          
        },
      },
      {
        text: '累计订单量',
        subtext: total,
        textAlign: 'center',
        x: '40%',
        y: '45%',
        textStyle: {
          fontSize: 14,
          color: '#999',
        },
        subtextStyle: {
          fontSize: 28,
          color: '#333',
        },
      },
    ],
    tooltip: {
      formatter(params) {
        // console.log(params)
        // seriesName要求series中必须有name属性
        const res = `
          ${params.seriesName}<br>
          ${params.marker} ${params.data.title} <br>
          ${params.marker} 销售额: ${params.data.value} <br>
        `
        return res
      },
    },
    legend: {
      // legend要求series的data数组中对象必须有name属性
      orient: 'vertical',
      left: '80%',
      top: 'top',
      textStyle: {
        color: '#888',
      },
    },
    series: {
      type: 'pie',
      name: '品类分布',
      data: _data,
      radius: ['45%', '60%'], // 饼图的半径[内半径，外半径]
       center: ['40%', '50%'], // 饼图的中心坐标
      label: {
         position: 'outside',
        formatter(params) {
          // console.log(params)
          return params.data.title
        },
      },
      
      itemStyle: {
        borderWidth: 8,//可控制连接线与饼图之间的间隙
        borderColor: '#fff',
      },
    },
  }
}

const handleChange = () => {
  if (type.value === 'category') {
    renderCategoryChart(categoryData.value.data1)
  } else if (type.value == 'product') {
    renderCategoryChart(categoryData.value.data2)
  }
}
onMounted(async () => {
  tableData.value = await getKeywordsData()
  // console.log(tableData.value)
 categoryData.value = await getCategoryData()
  // 由于接口返回的数据格式不是我们希望, 因此需要对原始数据进行加工处理
  const userData = tableData.value
    .map((item) => item.totalUser)
    .slice(0, 10)
    .sort((a, b) => a - b)

  const searchData = tableData.value
    .map((item) => item.totalSearch)
    .slice(0, 10)
    .sort((a, b) => a - b)

  renderLineChart(userOption, userData)
  renderLineChart(searchOption, searchData)
  renderCategoryChart(categoryData.value.data1)
})
</script>

<style lang="scss" scoped>
.third-comp {
  display: flex;
  gap: 20px;
  margin-top: 20px;
  .left {
    flex: 1;
    h2 {
      font-weight: 600;
    }
    .main {
        padding: 20px;
        .charts{
            display: flex;
            gap: 20px;
            .left-chart,.right-chart{
                flex: 1;
                .title{
                    font-size: 14px;
                    color: #727171;
                }
                .number{
                    margin-top: 10px;
                    font-size: 20px;
                    font-weight: 600;
                }
                .echarts{
                    height: 50px;
                }
            }
        }
        .table{
            .el-pagination{
                margin-top:16px;
                display: flex;
                justify-content: end;
            }
        }
    }
  }
  .right {
    flex: 1;
    :deep(.el-card__header) {
      position: relative;
      h2 {
        font-weight: 600;
      }
      .el-radio-group {
        position: absolute;
        top: 10px;
        right: 20px;
      }
    }
    :deep(.el-card__body) {
      height: 502px;
      box-sizing: border-box;
    }
  }
}
</style>
